<!--
 * @Author: zhuxiaoyi
 * @Date: 2022-08-12 09:03:54
 * @LastEditor: zhuxiaoyi
 * @LastEditTime: 2022-10-26 19:37:54
 * @Description: 
-->
​
<template>
    <div id="targetMap" :style="`height: ${viewHeight}px`"></div>
</template>

<script>
import $ from 'jquery'
import { defineComponent, reactive, ref, toRefs, onMounted, watch } from 'vue'
export default defineComponent({
    name: 'Template',
    props: {
        currentRow: {
            type: Object,
            required: true,
        },
        changeMapName: {
            type: Object,
            required: true,
        },
        geoserverURL: {
            type: String,
            required: true,
        }
    },
    emits: ['emitsHandler'],
    components: {},
    setup(props, context) {
        var geoJson;
        const data = reactive({
            map: null,
            viewHeight: window.innerHeight - 60,
            position: '',
        })
        const getGeojson = function () {
            new Promise((resolve, reject) => {
                const url = props.geoserverURL + '/geoserver/result/ows'
                const params = {
                    service: 'WFS',
                    version: '1.1.0',
                    request: 'GetFeature',
                    typeName: props.changeMapName.json,
                    outputFormat: 'application/json',
                    srsName: 'EPSG:4326'
                }
                const url_str = url + L.Util.getParamString(params, url)
                $.ajax({
                    // type:'POST',
                    url: url_str,
                    dataType: 'json',
                    success: function (data) {
                        console.log(data)
                        addPolyFile(data)
                    },
                })
            })
        };
        const initMap = function () {

            if (props.currentRow.posjson !== '' && props.currentRow.posjson !== null) {
                data.position = JSON.parse(props.currentRow.posjson)
            } else {
                data.position = {
                    center: [29.0816, 116.0785],
                    zoom: 13.5,
                }
            }
            document.getElementById('targetMap').innerHTML = "<div id='map' style='width: 100%; height: 100%;'></div>";
            var normalm = L.tileLayer.chinaProvider('TianDiTu.Normal.Map', {
                maxZoom: 18,
                minZoom: 5
            })
            var imgm = L.tileLayer.chinaProvider('TianDiTu.Satellite.Map', {
                maxZoom: 18,
                minZoom: 5
            })
            var imga = L.tileLayer.chinaProvider('TianDiTu.Satellite.Annotion', {
                maxZoom: 18,
                minZoom: 5
            });
            var wmsLayer = L.tileLayer(`${props.geoserverURL}/geoserver/gwc/service/tms/1.0.0/result%3A${props.changeMapName.before.split(':')[1]}@EPSG%3A900913@png/{z}/{x}/{y}.png`, {
                maxZoom: 18,
                minZoom: 5,
                reuseTiles: true,
                tms: true
            })
            var image = L.layerGroup([imgm]);
            var three = L.layerGroup([wmsLayer]);
            var nano = L.layerGroup([imga, imga]);
            var normal = L.layerGroup([normalm])
            // var geoJsonL = L.layerGroup([geoJson])
            var baseLayers = {
                "影像": image,
            }
            /* var overlayLayers = {
                "图斑": geoJsonL
            } */
            data.map = L.map("map", {
                center: data.position.center,
                zoom: data.position.zoom,
                layers: [image, three, nano,],
                zoomControl: true
            }, 100);

            L.control.layers(baseLayers,/* overlayLayers */).addTo(data.map);
            //中心点位
        };
        const addPolyFile = function (poly) {
            geoJson = L.geoJSON(poly, {
                style: {
                    weight: 2,
                    opacity: 1,
                    color: '#2f8ffc',
                    fillOpacity: 0.2,
                    fillColor: '#6ba7de'
                },
                /* onEachFeature: ((feature, layer) => { //对每个小块进行定义
                    switch (feature.properties.ChangeType) {
                        case 1:
                            layer.setStyle({
                                weight: 3,
                                color: '#409eff',  //新增
                                fillOpacity: 0.2,
                            });
                            break;
                        case 2:
                            layer.setStyle({
                                weight: 3,
                                color: 'red', //扩大
                                fillOpacity: 0.2,
                            });
                            break;
                        case 3:
                            layer.setStyle({
                                weight: 3,
                                color: '#13c2c2',  //减少
                                fillOpacity: 0.2,
                            });
                            break;
                        default:
                            ChangeTypecCN = '---'
                            break;
                    }
                    layer.on({
                        //点击弹窗
                        click: ((e) => {
                            let properties = e.target.feature.properties
                            let ActiveTypeCN = translateAT(e.target.feature.properties)
                            let ChangeTypecCN = translateCT(e.target.feature.properties)
                            var content = `
                                <p><strong>活动类型：</strong> ${ActiveTypeCN}</p>
                                <p><strong>变化类型：</strong> ${ChangeTypecCN}</p>
                                <p><strong>中心经度：</strong> ${Number(properties.CenterLat).toFixed(2)}</p>
                                <p><strong>中心纬度：</strong> ${Number(properties.CenterLon).toFixed(2)}</p>
                                <p><strong>面积(m²)：</strong> ${Number(properties.Area).toFixed(2)} </p>
                                <p><strong>描述信息：</strong> ${properties.Dscribe ? properties.Dscribe : '---'}</p>
                                <p><strong>前时相：</strong> ${props.changeMapName.qianDate
                                    ? props.changeMapName.qianDate : '---'}</p>
                                <p><strong>后时相：</strong> ${props.changeMapName.houDate ? props.changeMapName.houDate : '---'}</p>
                            `
                            e.target.bindPopup(content);
                            e.target.openPopup()
                        }),
                    });
                }) */
            }).addTo(data.map);
            //中心点位
        }
        const createMap = function () {
            getGeojson()
            initMap()
        }
        onMounted(() => {
        })
        return {
            ...toRefs(data),
            initMap, createMap
        }
    },
})
</script>

<style lang="scss" scoped>

</style>
<style lang="scss">
#map {
    width: 100%;
    height: 100%
}

.leaflet-sbs-range {
    left: 0;
    top: 10
}
</style>